﻿<template>
  <div class="git_Exchange_contain" ref="git_contain">
    <Header_other v-bind:header_name ="header_name"></Header_other>
    <!--<transition name="fade">
      <router-view></router-view>
    </transition>-->
    <div class="git_Exchange_inner_header">
        <div class="count_left_header f_l">
          我的积分
        </div>
        <div class="num_count f_l">1000</div>
        <div class="middle_title">
          官方兑换
        </div>
        <div class="my_duih" v-on:click.self="goTo_me">
          我的兑换
        </div> 
    </div>
    <div class="banner_swiper">
      <nav_scroll></nav_scroll>
    </div>
    <div class="middle_nav">
            校友信物
          <div class="my_duih middle_nav_btn" v-on:click="my_letter">
            我的信物
          </div>
    </div>
    <div id="wrapper2">
        <scroller class="clearfix">
          <div class="last_box" v-on:click="show_layer_box">
            <img src="../../static/img/login_bg.png" alt="Alternate Text" class="last_box_img" v-on:click="show_layer_box" />
            <p>复古信片</p>
            <div class="last_box_list">
              很有意思的复古小物品明信片，指的收藏
            </div>
            <div class="last_box_user">
              <img src="" class="f_l last_box_user_img">
              <div class="last_box_user_name">
                用户名
              </div>
            </div>
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
          <div class=" last_box">
            sss
          </div>
        </scroller>
</div>
    <!--<Detail_Exchange v-show="layer_show" v-on:hide_detail="hide_detail_1"></Detail_Exchange>-->
</div>
</template>

<script>
  import {mapState, mapMutations,mapActions,mapGetters} from 'vuex';
  import Header_other from "./header_other/Header_other.vue";
  import IScroll from "iscroll";
  import { Toast } from 'mint-ui';
  //limit_Scroll
  import limit_scroll from "../../static/js/limit_scroll.js"
  import Scroll_view from "./scroll_view/scroll_view.vue"
  import nav_scroll from "./scroll_view/nav_gift_scrol.vue"
  //import Detail_Exchange from "./Detail_Exchange.vue";
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      show_layer:false,
      get_layer_show: this.$store.getters.get_layer_show,
      layer_show: false,
      header_name:"礼物兑换"
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {
    //limit_scroll(this.$refs.el, this.$refs.git_contain);
    //let myScroll = new IScroll('#wrapper2');
  },
  methods: {
    my_letter: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/my_upload", router: this.$router
        });
    },
    refresh: function () {

    },
    infinite: function () {

    },
    show_layer_box: function () {
     // sessionStorage.setItem("detail_post_card",)
      //essionStorage.setItem("off_post_id",)
      this.$store.dispatch("thom_redirect",
        {
          name: "/Detail_Exchange", router: this.$router
        });
    },
    hide_detail_1: function () {
    },
    goTo_me: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/my_Exchange", router: this.$router
        });
    }
  },
  components: {
    Header_other,
    Scroll_view,
    nav_scroll,
    //Detail_Exchange
  }
}
</script>
<style scoped>
  .middle_title {
    font-weight: 500;
    color: #9f5c2f;
  } 
  .header_title_other {
    font-weight: 500;
  } 
  .git_Exchange_inner_header {
    height: 1.8rem;
    line-height: 1.8rem;
    box-shadow: 0 2px 4px 1px #b1abab
  }

  .count_left_header {
    font-size: 0.6rem;
    padding-left: 3.2%;
    color: #9f5c2f;
    float: left;
  }

  .num_count {
    float: left;
    font-size: 0.6rem;
    padding-left: 1.2%
  }
  .wrap_img_box{
    border-radius:2vw;
  }
  .wrap_img_box img{
    border-radius:2vw;
  } 
  .wrap_img_box_last_list {
    line-height: 1.5;
    font-size: 0.55rem;
  } 
  .git_Exchange_inner_header {
    position: relative;
    color: #9f5c2f;
    font-weight: 600;
    background-color: #fff;
  }

  .middle_title {
    font-size: 0.8rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .my_duih {
    width: 15%;
    font-size: 0.6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    border: 1px solid #9f5c2f;
    float: right;
    margin-top: 0.25rem;
    margin-right: 3%;
    border-radius:1vw;
  }

  .banner_swiper {
    height: 9.2rem;
    line-height: 9.2rem;
    background-color: #eeeeee;
  }

  .middle_nav {
    text-align: center;
    font-size: 0.8rem;
    color: #9f5c2f;
    height: 1.75rem;
    background-color: #fff;
    line-height: 1.75rem;
    box-shadow: 0 2px 10px 2px rgba(115, 112, 112, 0.44);
  }

  .last_container {
    width: 100%;
    height: 16.65rem;
    background-color: #eee;
  }

  .middle_nav {
    text-align: center;
    position: relative;
  }

  .middle_nav_btn {
    position: absolute;
    top: 0;
    right: 3%;
    margin-right: 0;
  }
  /*last box*/
  .last_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    // overflow-y: scroll;
  }

  .last_box {
    float: left;
    width: 30vw;
    height: 7.2rem;
    box-shadow: 0 0 10px 2px rgba(177, 173, 173, 0.44);
    background-color: #fff;
    border-radius: 2vw;
    margin-top: 0.37rem;
    margin-left: 2.5vw;
  }

  .last_box_img {
    border-radius: 2vw 2vw 0 0;
    width: 100%;
    height: 3.75rem;
  }
  /*last_container s*/
  /* .last_box:nth-last-of-type(1) {
    margin-bottom:6rem;
  }
   */
  .last_box_style {
    margin-bottom: 6rem;
  }

  .last_box p {
    font-size: 0.5rem;
    font-weight: 600;
    text-align: left;
    margin-left: 8%;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }

  .last_box_list {
    margin-left: 6%;
    margin-right: 10%;
    font-size: 0.5rem;
  }

  .last_box_user_img {
    float: left;
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid #a25f34;
    border-radius: 0.5vw;
  }

  .last_box_user_name {
    float: left;
    color: #a25f34;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
    margin-top: 0.15rem;
    margin-left: 0.2rem;
  }

  .last_box_user {
    transform: translate(6vw,0.2rem);
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .2s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
 /*scroll s*/
  body {
    /* On modern browsers, prevent the whole page to bounce */
    overflow: hidden;
  }

  #wrapper2 {
    background-color: #eee;
    position: relative;
    width: 100%;
    height: 20rem;
    overflow: scroll;
    /* Prevent native touch events on Windows */
    -ms-touch-action: none;
    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
  }

  #scroller {
    background-color:#eeeeee;
    position: absolute;
    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  /*certain btn e*/
  /*scroll e*/
</style>



